<template>
	<div class="ai">
		<div class="banner">
			<h1>AI，让营销更智慧</h1>
			<p>AI技术引领智慧新营销 ,随着企业和品牌数字化转型进程加速，AI技术赋能智慧营销逐渐成为趋势。</p>
		</div>
		<div class="container1">
			<div class="title">关于AI智慧营销系统</div>
			<img src="./img/product_aboutai_icon1@3x.png" alt="">
			<p>AI技术引领智慧新营销 ,随着企业和品牌数字化转型进程加速，AI技术赋能智慧营销逐渐成为趋势。如何通过AI能力让品牌营销更快捷、更高效，企业的AI营销赋能之路。</p>
			<p>传统导购由于文化层次、学习接受能力等影响，无法保证对客户有效的服务和营销。针对客户的规模性痛点，智加云AI智慧营销系统实现门店智慧导购。导购在于客户交谈和服务时，客户扫描门店小程序，后台可以协助导购快速识别用户需求，利用AI的能力给客户自动化打上身份标签，例如客户的基础信息电话、性别、年龄等。将传统的展示服务型导购转变为营销服务型导购，快速增强导购对于门店营销获客的能力和工具化支持。</p>
		</div>
		<div class="container2">
			<div class="title">锁定商家目标用户群体AI智慧营销</div>
			<div class="con">
				<div class="item">
					<img src="./img/product_aboutai_pic1@3x.png" alt="">
					<span>门店人群</span>
				</div>
				<div class="item">
					<img src="./img/product_aboutai_pic3@3x.png" alt="">
					<span>商圈人群</span>
				</div>
				<div class="item">
					<img src="./img/product_aboutai_pic2@3x.png" alt="">
					<span>场景人群</span>
				</div>
				<div class="item">
					<img src="./img/product_aboutai_pic4@3x.png" alt="">
					<span>意向人群</span>
				</div>
			</div>
		</div>
	</div>
	
</template>

<script>
	export default {
		name: 'aiMarketingSystem',
	}
</script>

<style lang="stylus" scoped>
	.ai{
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.banner{
			width: 100%;
			height: 5rem;
			background: url('./img/product_aboutai_banner@3x.png') no-repeat;
			background-size: 100% 100%; 
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			h1{
				font-size: 0.36rem;
				color: #FFFFFF;
				margin: 0.5rem 0; 
			}
			p{
				width: 53.6%;
				text-align: center;
				color: rgba(255,255,255,0.8);
				font-size: 0.24rem;
				line-height: 0.36rem;
			}
		}
		.container1{
			width: 100%;
			height: 13.95rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #F3F6FB;
			.title{
				font-size: 0.36rem;
				color: #333333;
				margin: 0.6rem 0 0.5rem 0;
			}
			img{
				width: 4.33rem;
				height: 3.78rem;
				margin-bottom: 0.6rem;
			}
			p{
				width: 88%;
				font-size: 0.3rem;
				color: #666;
				line-height: 0.5rem;
				margin-top: 0.4rem;
				padding: 0 6%;
			}
		}
		.container2{
			width: 100%;
			height: 9.78rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #fff;
			.title{
				width: 45%;
				text-align: center;
				color: #333;
				font-size: 0.36rem;
				line-height: 0.6rem;
				margin: 0.6rem 0 0.5rem 0;
			}
			.con{
				width: 92%;
				padding: 0 4%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				flex-wrap: wrap;
				.item{
					width: 3.35rem;
					height: 3.35rem;
					position: relative;
					margin-bottom: 0.2rem;
					img{
						width: 100%;
						height: 100%
					}
					span{
						width: 100%;
						position: absolute;
						text-align: center;
						bottom: 0;
						color: rgba(255,255,255,0.8);
						line-height: 3;
						font-size: .28rem;
						background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, #000000 100%);
					}
				}
			}
		}
	}
</style>

